/**
 * @Title: index.js
 * @Description: index
 * @author: Fanchao
 * @date: 2020/8/2 5:50 下午
 * @version V1.0
 */
import React from 'react';
import styles from './index.less';
import { Row, Col, Table } from 'antd';
import SectionTitle from 'components/SectionTitle';
import { connect } from 'umi';
import LineCharts from '@/pages/teaching-quality/class-evaluations/[id]/components/line-charts';

const TeachersEvaluationsDetail = ({ classEvaluationsDetail: { dataSource, reqPageInfo, userData, lineData }, dispatch, loading }) => {
    const columns = [
        {
            title: '教员姓名',
            dataIndex: 'teacherRealName',
            align: 'left',
        },
        {
            title: '教员编号',
            dataIndex: 'evaluateObjectNo',
            align: 'left',

        },
        {
            title: '课程名称',
            dataIndex: 'course',
            align: 'left',

        },
        {
            title: '学年',
            dataIndex: 'schoolYear',
            align: 'left',
        },
        {
            title: '学期',
            dataIndex: 'semester',
            align: 'left',
        },
        {
            title: '评价分数',
            dataIndex: 'evaluateScore',
            align: 'left',
        },
        {
            title: '评价结果',
            dataIndex: 'evaluateResult',
            align: 'left',
        },
        {
            title: '全校排名',
            dataIndex: 'schoolRank',
            align: 'left',
        },
        {
            title: '单位排名',
            dataIndex: 'departmentRank',
            align: 'left',
        },
    ];
    const searchByPageNumber = (pageNumber) => {
        dispatch({
            type: 'teachers/getDataSource',
            payload: {
                reqPageInfo: {
                    pageNumber,
                    pageSize: reqPageInfo.pageSize,
                },
            },
        });
    };
    return (
        <div className={styles.detailContainer}>
            <div className={styles.detailHeader}>
                <SectionTitle title={'教员信息'}/>
                <Row>
                    <Col span={4}>
                        <span className={styles.label}>教员姓名：</span>
                        <span className={styles.value}>{userData.teacherRealName}</span>
                    </Col>
                    <Col span={4}>
                        <span className={styles.label}>教员编号：</span>
                        <span className={styles.value}>{userData.credentialsNo}</span>
                    </Col>
                    <Col span={4}>
                        <span className={styles.label}>职称：</span>
                        <span className={styles.value}>{userData.teacherTitle}</span>
                    </Col>
                </Row>
            </div>
            <div className={styles.detailEcharts}>
                <SectionTitle title={'教员评价数据图例'}/>
                <LineCharts lineData={lineData}/>
            </div>
            <div className={styles.detailTableContainer}>
                <SectionTitle title={'课程评价详情'}/>
                <Table
                    bordered={false} // 是否有边框
                    rowKey='evaluateObjectId' // 唯一key值
                    loading={loading} // 加载动画
                    columns={columns} // 表头
                    dataSource={dataSource.contentList}
                    pagination={{
                        total: dataSource.totalElements,// 总记录数
                        defaultPageSize: 10, // 默认显示条数
                        showQuickJumper: true, // 快速跳转
                        showSizeChanger: true, // 一页展示数据条数
                        onChange: (pageNumber) => searchByPageNumber(pageNumber),
                        showTotal: () => {
                            return `共${dataSource.totalElements}条`;
                        },
                    }}
                />
            </div>
        </div>
    );
};


export default connect(({ classEvaluationsDetail, dispatch, loading }) => ({
    classEvaluationsDetail,
    dispatch,
    loading: loading.effects['classEvaluationsDetail/getDataSource'],
}))(TeachersEvaluationsDetail);
